<script setup>
import { ref, onMounted } from "vue"
import hljs from "highlight.js"
import "highlight.js/styles/stackoverflow-dark.min.css"

const props = defineProps({
	tip_msg: {
		type: String,
		default: "",
	},
	code_msg: {
		type: String,
		default: "",
	},
})

onMounted(() => {
	code_content.value = document.getElementById(code_id.value)

	hljs.highlightElement(code_content.value)
})

const isclick = ref(false)
const code = ref(null)
const code_content = ref(null)
const pre = ref(null)
const code_id = ref(null)

const getCode_id = () => {
	// 随机获取26个字母的10位
	let code_id_str = ""
	for (let i = 0; i < 10; i++) {
		code_id_str += String.fromCharCode(65 + Math.floor(Math.random() * 26))
	}
	code_id.value = code_id_str
	return code_id_str
}

const open_code = () => {
	if (isclick.value) {
		isclick.value = false
		code_content.value.style.gridTemplateRows = "0fr"
		code_content.value.style.padding = "0px"
		pre.value.style.gridTemplateRows = "0fr"
		return
	}
	isclick.value = true
	code_content.value.style.gridTemplateRows = "1fr"
	code_content.value.style.padding = "20px"
	pre.value.style.gridTemplateRows = "1fr"
}

// 自动复制代码
const copy_code = () => {
	navigator.clipboard.writeText(props.code_msg).then(() => {
		ElMessage({
			type: "success",
			message: "复制成功",
		})
	})
}
</script>
<template>
	<div class="show-box">
		<p class="show-box-tip">
			{{ tip_msg }}
		</p>
		<div class="out">
			<slot name="show-body"></slot>
			<div class="detail">
				<div class="detail-box-copy">
					<div class="detail-box-copy_">
						<icon-svg
							name="复制"
							size="20px"
							class="detail-icon-copy"
							@click="copy_code" />
					</div>
				</div>
				<div class="detail-box-code">
					<div class="detail-box-code_">
						<icon-svg
							name="代码"
							size="20px"
							class="detail-icon-code"
							@click="open_code" />
					</div>
				</div>
			</div>
			<div class="code" ref="code">
				<pre class="pre" ref="pre">
                    <code :id="getCode_id()" class="atom-one-dark" ref="code_content">
                        {{ code_msg }}
                    </code>
                </pre>
			</div>
		</div>
	</div>
</template>
<style scoped lang="scss">
.show-box {
	.show-box-tip {
		font-size: 20px;
	}
	.out {
		margin-top: 30px;
		border: 1px solid $all-border-color;
		border-radius: 5px;
	}
	.detail {
		border-top: 1px solid $all-border-color;
		height: 50px;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		.detail-box-code {
			height: inherit;
			width: 50px;

			.detail-icon-code {
				&:hover {
					transform: scale(1.2);
				}
			}
			.detail-box-code_ {
				height: 100%;
				width: 100%;
				cursor: pointer;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}
			&::after {
				content: "查看源代码";
				color: inherit;
				width: 100px;
				height: 40px;
				text-align: center;
				line-height: 40px;
				background-color: inherit;
				border: 1px solid $all-border-color;
				border-radius: 5px;
				position: relative;
				right: 50px;
				z-index: 100;
				display: none;
			}
			&:hover::after {
				display: block;
			}
		}
		.detail-box-copy {
			height: inherit;
			width: 50px;

			.detail-icon-copy {
				&:hover {
					transform: scale(1.2);
				}
			}
			.detail-box-copy_ {
				height: 100%;
				width: 100%;
				cursor: pointer;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}
			&::after {
				content: "复制源代码";
				color: inherit;
				width: 100px;
				height: 40px;
				text-align: center;
				line-height: 40px;
				background-color: inherit;
				border: 1px solid $all-border-color;
				border-radius: 5px;
				position: relative;
				right: 50px;
				z-index: 100;
				display: none;
			}
			&:hover::after {
				display: block;
			}
		}
	}
	.code {
		display: grid;
		grid-template-rows: 0fr;
		width: 100%;
		border-top: 1px solid $all-border-color;
		font-size: 20px;
		transition: all $animation-duration-05 linear;
		font-family: "微软雅黑";
		overflow: hidden;
		.pre {
			display: grid ;
			grid-template-rows: 0fr;
			transition: all $animation-duration-05 linear;
			.atom-one-dark {
				display: grid !important;
				grid-template-rows: 0fr;
				transition: all $animation-duration-05 linear;
				padding: 0px;
				overflow: auto;
			}
		}
	}
}
</style>
